<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- <script>
	window.onload = function() {
		var t = document.getElementById("works_main");
		t.style.width = 0px;
		t.style.Tansition: 
	}
</script> -->
<style>
#works_main {
	width: 100%;
	height: 570px;
	background-color: orange;
	animation: start 1.5s ease-out forwards;
	-webkit-animation: start 1.5s ease-out forwards;
	-ms-animation: start 1.5s ease-out forwards;
}


@-webkit-keyframes start { 
	0%{
		-webkit-transform: rotateY(180deg); 
		-webkit-transform-origin: 100% 0%;
		opacity: 0;
		-webkit-perspective: 100px;
	}
	20%{opacity:0}
	100%{-webkit-transform:translateX(0); opacity:1}
}
@-ms-keyframes start { 
	0%{-ms-transform: rotateY(-90deg); opacity: 0}
	50%{opacity:1}
	100%{-ms-transform:translateX(0); opacity:1}
}
@keyframes start { 
	0%{
		transform: rotateY(180deg);
		transform-origin: 100% 0%;
		opacity: 0;
		perspective: 100px;
	}
	20%{opacity:0}
	100%{transform:translateX(0); opacity:1}
}

</style>
</head>
<body>
	<div id='works_main'></div>
</body>
</html>